<template>
<div>
  	<div class="bg">
		<HeadBox></HeadBox>
	</div>
	<map-view @mapLoad="mapLoad" :center="center" :zoom="zoom"></map-view>
	<div class="operation-box">
		<div><i class="el-icon-s-home" @click="handleHome"></i></div>
		<div>
			<el-popover
				v-model="visiblePopover"
				placement="top"
				trigger="manual"
			>
				<ul class="dropdown">
					<li v-for="(item, index) in dayList" :key="index" @click="handleChange(item.value)">{{ item.label }}</li>
				</ul>
				<i class="el-icon-time" slot="reference" @click="visiblePopover = !visiblePopover"></i>
			</el-popover>
		</div>
		<div><i class="el-icon-zoom-in" @click="handleAdd"></i></div>
		<div><i class="el-icon-zoom-out" @click="handleDelete"></i></div>
	</div>
	<el-drawer
		title="我是标题"
		:with-header="false"
		:visible.sync="drawer"
		direction="rtl"
		size="400px"
		:modal="false"
	>
		<div class="drawer-box">
			<div class="header-point">
				<div class="point-intro">
					<div class="tit">
						{{ detailInfo.situs }}
						<span>{{ detailInfo.pt }}</span>
					</div>
				</div>
				<div class="popup-info">
					<div class="num-info">共<span>{{ detailInfo.num }}</span>例确诊</div>
					<div v-for="(item, index) in detailInfo.patientList" :key='index'>
						<div class="user-info">
							<i class="el-icon-user-solid icon-user"></i>
							<span class="name">{{ item.patientCode }}</span>
							<span class="date">{{ item.diagnosisTime }}</span>
							<div class="look" @click="handleLook(detailInfo.lat, detailInfo.lng, item.id)">
								查看轨迹地图
								<i class="el-icon-arrow-right icon-right"></i>
							</div>
						</div>
						<el-timeline style="padding-left: 18px">
							<el-timeline-item v-for="(childItem, childIndex) in item.pts" :key="childIndex" color="#0A194C">
								<div class="tripItem">
									<div class="date">{{ childItem.time }}</div>
									<div class="cont">{{ childItem.thing }}</div>
								</div>
							</el-timeline-item>
						</el-timeline>
					</div>
				</div>
			</div>
		</div>
	</el-drawer>
</div>
</template>

<script>
import MapView from '@/components/map-container/index.vue'

export default {
  name: "MapContainer",
  components: {
	MapView
  },
  data() {
    return {
		map: null,
		initLng: 120.43,
		initLat: 36.15,
		center: [120.433655, 36.18505],
		zoom: 12, // 地图放大比例
		marker: null,
		marklist: [],
		page: 1,
		limit: 1000,
		visiblePopover: false,
		day: "", //（7天或者14天）7或者14，全部（""）
		distance: 3, // 1-8公里 不传全部
		district: '', // 区划
		text: null, // 纯文本标记
		textList: [],
		drawer: false, // 抽屉弹层
		detailInfo: {}, // 点位详情信息
		dayList: [
			{ value: "7", label: "近7天轨迹点" },
			{ value: "14", label: "近14天轨迹点" },
			{ value: "", label: "全部轨迹点" }
		]
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
	// 初始化地图
    mapLoad(amap) {
      	this.map = amap
		let _this = this
	  	AMap.plugin('AMap.DistrictSearch', function () {
			var district = new AMap.DistrictSearch({
				// 返回行政区边界坐标等具体信息
				extensions: 'all',
				// 设置查询行政区级别为 区 
				level: 'district'
			})

			district.search('李沧区', function(status, result) {
				// 获取朝阳区的边界信息
				var bounds = result.districtList[0].boundaries

				var polygons = []
				if (bounds) {
					for (var i = 0, l = bounds.length; i < l; i++) {
						//生成行政区划polygon
						var polygon = new AMap.Polygon({
							map: _this.map,
							strokeWeight: 1,
							path: bounds[i],
							fillOpacity: 0.4,
							fillColor: '#80d8ff',
							strokeColor: '#0091ea'
						})
						polygons.push(polygon)
					}
				}

				_this.map.add(polygons)
				// 地图自适应
				// _this.map.setFitView(polygons); // 视口自适应
			})
		})
		this.$nextTick(() => {
			this.getMapPointData()
		})
    },
	// 地图点位打点
	getMapPointData () {
		let _this = this
		this.$get('/pt/page', {
			// 传参参数名：参数值,如果没有，就不需要传
			page: this.page,
			limit: 1000,
			day: this.day,
			lat: this.initLat,
			lng: this.initLng,
			district: '李沧区' // 区划
		}).then((res) => {
			if (res.code !== 0) {
				return this.$message.error(res.msg)
			}
			let mapPointList = []
			res.data.list.map(item => { 
				if (item.pt === "轨迹点") {
					return false
				}
				mapPointList.push(item)
			})
			
			// 	打印调用成功回调
			if (this.marklist) {
				this.map.remove(this.marklist);
				this.marklist = []
			}
			// 	打印调用成功回调
			if (this.textList) {
				this.map.remove(this.textList);
				this.textList = []
			}
			for (let i in mapPointList) {
				// 创建marker点位标记
				var icon = new AMap.Icon({
					// 图标尺寸
					size: new AMap.Size(90, 90),
					// 图标的取图地址
					image: 'https://xcdx.nyntcl.com/qz.png',
					// 图标所用图片大小
					imageSize: new AMap.Size(35, 35),
					// 图标取图偏移量
					imageOffset: new AMap.Pixel(0, 0)
				});
				var marker = new AMap.Marker({
					position: new AMap.LngLat(mapPointList[i].lng, mapPointList[i].lat),
					icon: icon,
					offset: new AMap.Pixel(-17, -35)
				});
				
				marker.setClickable(true)
				
				marker.on('click', function() {
					_this.handleClickItem(mapPointList[i]) 
					_this.drawer = true
				})
				this.marklist.push(marker)
				
				
				// 创建text纯文本标记
				var text = new AMap.Text({
					text: mapPointList[i].situs,
					anchor: 'center', // 设置文本标记锚点
					draggable: false,
					position: new AMap.LngLat(mapPointList[i].lng, mapPointList[i].lat),
					offset: new AMap.Pixel(90, -27),
					cursor: 'pointer',
					shadow: './icon-sj-red.png',
					style: {
						'padding': '0 12px',
						'border-radius': '15px',
						'background': 'linear-gradient(180deg,#ff6e6e,#fb5151)',
						'width': 'auto',
						'height': '30px',
						'line-height': '30px',
						'border-width': 0,
						'box-shadow': '0 2px 4px 0 rgba(0,0,0,.15)',
						'text-align': 'center',
						'font-size': '16px',
						'color': '#fff',
						'position': 'relative',
						'right': '45%'
					}
				});
				
				text.on('click', function() {
					_this.handleClickItem(mapPointList[i]) 
					_this.drawer = true
				})
				this.textList.push(text)
				
				if (this.zoom < 13) {
					this.map.add(this.marklist)
				} else {
					this.map.add(this.textList)
				}
				
				/*
					* 监听地图缩放比zoom
					*/
				// 缩放开始
				function mapZoomstart() {
				}
				// 缩放中
				function mapZoom() {
					_this.zoom = _this.map.getZoom()
				}
				// 缩放结束
				function mapZoomend() {
					if (_this.zoom < 13) {
						_this.map.remove(_this.textList)
						_this.map.add(_this.marklist)
						
					} else {
						_this.map.remove(_this.marklist)	
						_this.map.add(_this.textList)
					}
					
				}
				// 绑定缩放的事件，判断地图是否最大，是否显示mark
				_this.map.on('zoomstart', mapZoomstart);
				_this.map.on('zoomchange', mapZoom);
				_this.map.on('zoomend', mapZoomend);
			}
		})
	},
	// 点击点位查看详情
	async handleClickItem (item) {
		this.detailInfo = item
		this.$nextTick(() => {
			this.map.setZoomAndCenter(14, [item.lng, item.lat]) // 同时设置地图层级与中心点
		})
		this.getDetail(item.lat, item.lng)
		this.drawer = true // 打开轨迹详情弹层
	},
	// 获取点位详情
	getDetail (lat, lng) {
		this.$get('/pt/queryPTDetail', {
			// 传参参数名：参数值,如果没有，就不需要传
			lat: lat,
			lng: lng
		}).then((res) => {
			if (res.code !== 0) {
				return this.$message.error(res.msg)
			}
			this.detailInfo = {
				...this.detailInfo,
				...res.data
			}
		})
	},
	// 回到李沧城市脑中枢系统
	handleHome() {
		this.$router.push({
			path: "/hsindex"
		})
	},
	// 切换轨迹点时间
	handleChange(value) {
		this.day = value
		this.getMapPointData()
		this.visiblePopover = false
	},
	// 地图放大
	handleAdd() {
		this.map.zoomIn()
	},
	// 地图缩小
	handleDelete() {
		this.map.zoomOut()
	},
	// 查看轨迹地图
	handleLook(lat, lng, id) {
		this.drawer = false
		this.$router.push({
			path: "/yxgj-map/trajectory-map",
			query: {
				lng: lng,
				lat: lat,
				pointId: id
			} 
		})
	}
  },
};
</script>

<style lang="less" scoped>
.bg {
  background: url(../../assets/image/bg.png);
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 997;
}

.operation-box {
	position: absolute;
	top: 140px;
	left: 20%;
	z-index: 1000;
	width: 230px;
	height: 50px;
	background: rgba(16,30,77,0.4);
	border: 2px solid #5780b4;
	border-radius: 18px;
	display: flex;
	box-shadow: 0 0 15px #4C8FE5;
}
.operation-box div {
	flex: 1;
}
.operation-box i {
	position: relative;
	top: 7px;
	display: inline-block;
	font-size: 32px;
	background: linear-gradient(rgba(255, 255, 255, 0.8) 44%, rgba(68, 123, 235, 0.4) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	cursor: pointer;
}

.header-point .point-intro {
	text-align: left;
	padding: 20px 0 10px 16px;
	border-bottom: 1px solid #eee;
}
.point-intro .tit {
	color: #fff;
	font-size: 23px;
	font-weight: 700;
	margin-bottom: 10px;
}
.point-intro .tit span {
	padding: 4px 7px;
	font-size: 14px;
	margin-left: 10px;
	color: #FFF08C;
	border-radius: 15px;
	border: 1px solid #FFF08C
}
.point-intro .address {
	color: #99A1BF;
	font-size: 15px;
}
.point-intro .address span {
	color: #99A1BF;
	padding: 0 8px;
}
.popup-info {
	height: 500px;
	padding:  10px 15px;
	box-sizing: border-box;
	text-align: left;
}
.num-info {
	color: #fff;
	font-size: 16px;
}
.num-info span {
	color: #FFF08C;
	padding: 0 5px;
	font-weight: 700;
}
.user-info {
	margin: 10px 0 20px;
}
.user-info .icon-user {
	position: relative;
	top: 2px;
	color: #00D5FF;
	font-size: 22px
}

.user-info .icon-right {
	position: relative;
	top: 1px;
	font-size: 18px;
}
.user-info .name {
	font-size: 18px;
	padding-left: 7px;
	font-weight: 700;
	color: #fff;
}
.user-info .date {
	font-size: 14px;
	color: #FFF08C;
	background-color: rgba(255,255,255,0.1);
	padding: 4px 8px;
	border-radius: 4px;
	margin-left: 5px;
}
.user-info .look {
	float: right;
	font-size: 15px;
	padding-left: 7px;
	position: relative;
	font-weight: 700;
	cursor: pointer;
	color: #fff;
}
.tripItem {
	padding: 10px 15px;
	box-sizing: border-box;
	background:rgba(255,255,255,0.1);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08);
	border-radius: 10px;
}
.tripItem .date {
	font-size: 14px;
	font-family: PingFangSC-Medium,PingFang SC;
	color: #FFFFFF;
}
.tripItem .cont {
	font-size: 14px;
	font-family: PingFangSC-Regular,PingFang SC;
	font-weight: 400;
	margin-top: 10px;
	color: #FFFFFF;
}

.drawer-box {
	background: #0A194C;
	height: 100vh;
}
</style>